<template>
	<view>
		<view class="content">
			<view>{{content}}</view>
		</view>
		<view style="tongji">{{number}}</view>
		<view class="btn">
			<button class="red" @click="copy" hover-class="anniu">我要复制</button>
			<button @click="getLove" hover-class="anniu">换句试试</button>
		</view>
		<!-- <button class="guangguang" @click="adGet">观看视频</button> -->

		<view style="margin: 30rpx;">
			<!-- #ifdef MP-WEIXIN -->
			<ad unit-id="adunit-fe833ca0ce8c1614" ad-type="grid" grid-opacity="0.8" grid-count="5" ad-theme="white"></ad>
			<!-- #endif -->
			<!-- #ifdef MP-TOUTIAO -->
			<ad type="lImg" unit-id="66rd23n2r3nhnd3a67" scale="110"></ad>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	import API from "../../../api.js";
	var videoAd = null;
	var interstitialAd = null;
	export default {
		data() {
			return {
				content: "",
				share: false,
				number: ""
			}
		},
		onShareAppMessage: function(shareOption) {
			let that = this
			if (shareOption.from == 'button') { // 判断是按钮还是右上角分享
				return {
					channel: 'video', // 必写 video
					templateId: '11111111', // 分享的模版 id 
					title: '花样述说我爱你', // 分享的标题
					desc: '给你不一样的土味情话呀', // 分享的内容介绍
					path: '/pages/list/loveyan/loveyan?share=true&content=' + that.content, // 分享的路径
					extra: {
						videoTopics: ["个性格测", "心理测试", "趣味测试"] // 只有抖音才会有的属性
					},
				}
			} else { // 右上角分享
				return {
					templateId: '111111', //分享的模版 id
					title: '花样述说我爱你', //分享的标题
					desc: '给你不一样的土味情话呀！', // 分享的内容
					path: '/pages/list/loveyan/loveyan?share=true&content=' + that.content, // 分享的路径
				}
			}
		},
		onLoad(res) {
			console.log(res)
			var that = this;
			that.share = res.share;
			if (that.share) {
				that.content = res.content;
			} else {
				that.getLove();
			}
			that.adLoad();

		},
		onShow() {
			if (interstitialAd) {
				interstitialAd.show().catch((err) => {
					console.error(err)
				})
			}
		},
		methods: {
			getLove: function() {
				var that = this;
				if (!that.share) {
					const requestTask = uni.request({
						url: 'https://api.uomg.com/api/rand.qinghua?format=json', //仅为示例，并非真实接口地址。
						data: {},
						success: res => {
							this.content = res.data.content
							console.log(res.data)
						}
					});
				}
			},
			copy: function(e) {
				var that = this;
				uni.setClipboardData({
					data: that.content,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						});
					}
				});
			},
			tongji: function() {
				var that = this;
				var a = uni.getStorageSync('number');
				if (a === "") {
					uni.setStorageSync('number', 0);
					that.number = uni.getStorageSync('number')

				} else {
					var b = a + 1;
					uni.setStorageSync('number', b);
					that.number = uni.getStorageSync('number')
				}
			},
			adLoad: function() {
				if (wx.createRewardedVideoAd) {
					// 加载激励视频广告
					videoAd = wx.createRewardedVideoAd({
						adUnitId: API.ad.createRewardedVideoAd //你的广告key
					})
					//捕捉错误
					videoAd.onError(err => {
						// 进行适当的提示
					})
					// 监听关闭
					videoAd.onClose((status) => {
						if (status && status.isEnded || status === undefined) {
							// 正常播放结束，下发奖励
							// continue you code
							this.tongji();
						} else {
							// 播放中途退出，进行提示
						}
					});
					if (wx.createInterstitialAd) {
						interstitialAd = wx.createInterstitialAd({
							adUnitId: API.ad.createInterstitialAd //这里是广告id
						})
						interstitialAd.onLoad(() => {
							console.log('onLoad event emit')
						})
						interstitialAd.onError((err) => {
							console.log('onError event emit', err)
						})
						interstitialAd.onClose((res) => {
							console.log('onClose event emit', res)
						})
					}
				}

			},
			adGet: function() {
				if (videoAd) {
					videoAd.show().catch(err => {
						// 失败重试
						videoAd.load()
							.then(() => videoAd.show())
					})
				}
			}
		}
	}
</script>

<style lang="less">
	page {
		.content {
			padding-top: 50rpx;
			color: #FFFFFF;

			view {
				padding: 50rpx;
				margin: 30rpx;
				background-color: #feada6;
				width: 600rpx;
				height: 600rpx;
				border-radius: 50rpx;
			}

		}

		.tongji {
			text-align: center;
			font-size: 25rpx;
			margin: 10rpx;
			color: #000000;
		}

		.btn {
			display: flex;

			button {
				margin-top: 50rpx;
				width: 40%;
				border-radius: 40rpx;
				background-color: #4CD964;
				color: #FFFFFF;
			}

			button::after {
				border: none;
			}

			.red {
				background-color: #feada6;
			}

			.anniu {
				background-color: #F0AD4E;
			}

		}

		.guangguang {
			margin: 25rpx;
			background-color: #007AFF;
			color: #FFFFFF;
			border-radius: 30rpx;
		}

		.guangguang::after {
			border: none;
		}
	}
</style>
